<template>
	<view class="container">
		<view class="main">
			<view class="Row1">
				<text>舒适的出游，</text>
				<text>从定义它开始。</text>
			</view>
			<view class="Row2 flex--col">
				<view class="two">
					<text class="zi">路线特征关键词</text>
					<view class="keytext">
						<view class="list" v-for="(label,index) in listkey" :key="index" @click="selectItem(index,label)" :class="{'active': labelNames.includes(label)}" :aria-checked="labelNames.includes(label)">
							<text class="a-text">{{label}}</text>
						</view>
					</view>
				</view>
				<view class="three">
					<text class="zi">出游安全感保障</text>
					<view class="buttonbox">
						<view class="list2" v-for="button in listbutton" :aria-checked="button.checked">
							<text class="a-text">{{button.name}}</text>
							<view>
								<switch @change="isChecked($event,button)" :checked="!!button.checked" class="switch-hide" />
								<image src="@/static/switchOff.svg"  class="icon"  role="button" :aria-label="'选择'+button.name" :style="button.checked !== 1 ? '' : 'display:none;'"></image>
								<image src="@/static/switchOn.svg" class="icon" role="button" :aria-label="'取消选择'+button.name"  :style="button.checked === 1 ? '' : 'display:none;'"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="Row3" @click="handleCustomizeRoute" role="button" aria-label="开启定制之旅">
				<image src="@/static/next.svg" class="icon--middle" ></image>
				<text>开启定制之旅</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {location} from "@/utils/geo.js"
	import * as AttractionApi from "@/api/attractions/attraction.js"
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				selectedIndex:0,//默认选中的索引(小的标签区域)
				// 景点标签
				listkey:[],
				labelNames:[],
				listbutton:[
					{
						name:'免费出游',
				        checked:0
					},
					{
						name:'无障碍设施',
						checked:0
					},
					{
						name:'人流量低',
						checked: 0
					}
				]
			};
		}, 
		
		computed:{
			...mapGetters(["route"]),
			isFree(){
				return this.listbutton[0].checked
			},
			isFacility(){
				return this.listbutton[1].checked
			},
			isFlow(){
				return this.listbutton[2].checked
			},
			
		},
		methods: {
			/** 页面跳转方法 **/
			start(){
				uni.navigateTo({
					url: '/pages/chux/addroute2'
				})
			},
			
			/** 数据处理方法 **/
			async handleCustomizeRoute(){ 
				// 提取用户选择表单，存储到状态管理
				try{
					const {labelNames,isFlow,isFree,isFacility} = this
					// 获取地址
					const points = this.$store.getters.userPosition
					// 封装options
					const options = {
						labelNames,
						isFlow,
						isFree,
						isFacility,
						...points
					}
					
					// 存储到route
					this.$store.dispatch("route/setOptions",options)
					this.start()
				}catch(error){
					this.$error(error.message)
					console.log(error)
				}
				
			},
			selectItem(index,label) {
				const labelNames = this.labelNames;
				// 如果没有选择标签，则加入labelNames列表
				if(!this.isSelected(labelNames,label)){
					labelNames.push(label)
				}else{
					// 如果选择了标签，则从labelNames列表移除
					const label_index = labelNames.indexOf(label)
					labelNames.splice(label_index,1)
				}
			},
			isSelected(list,value){
			    return list.includes(value);
			},
			isChecked(e,button){
			  button.checked = e.detail.value?1:0
			},
			
			/** 数据请求方法 **/
			getAttractionLabels(){
				AttractionApi.getLabels()
							.then(data=> {
								this.listkey = data.map(label => label.name)
							})
							.catch(error => console.log(error))
			},
			initData(){
				this.listbutton[0].checked = this.route.options?.isFree || 0
				this.listbutton[1].checked = this.route.options?.isFacility || 0
				this.listbutton[2].checked = this.route.options?.isFlow || 0
				this.labelNames = this.route.options?.labelNames || []
			}
		},
		
	    onShow(){
			if(this.listkey.length == 0){
				this.getAttractionLabels()
			}
			this.initData()
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
		height: 100%;
	}
	
	.container{
		display: flex;
		.main{
			margin: auto;
			width: 600rpx;
			height: 699px;
			display: flex;
			flex-direction:column;
			.Row1,.Row2,.Row3{
				margin-top: 16px;
			}
			.Row1{
				width: 100%;
				height: 113px;
				border-bottom: 2px solid rgba(242, 132, 58, 1);
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				text{
					margin-top: 10px;
					width: 224px;
					height: 93px;
					font-size: 32px;
					font-weight: 700;
					letter-spacing: 0px;
					line-height: 46.34px;
					color: #333;
				}

			}
			.Row2{
				width: 100%;
				gap:24px;
				justify-content: flex-start;
				align-items: flex-start;
				.one,.two,.three{
					margin-bottom: 10px;
				}
				.one{
					width: 287px;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					.zi{
						margin-top: 9px;
						width: 204px;
						height: 24px;
						font-size: 20px;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 23.17px;
						color: rgba(33, 37, 41, 1);
					}
					.seasonicon{
						margin-top: 8px;
						height: 62px;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						.spring,.summer,.autumn,.winter{
							width: 43px;
							height: 58px;
							margin-right: 10px;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							image{
								width: 40px;
								height: 45px;
							}
							.box{
								width: 43px;
								height: 15px;
								
								font-weight: 700;
								letter-spacing: 0px;
								line-height: 14.48px;
								color: rgba(33, 37, 41, 1);
								text-align: center;
								vertical-align: top;
								text{
									margin-top: 10px;
								}
							}
						}
					}
				}
				.two{
					width: 100%;
					
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					color:#333;
					.active{
						background-color: rgba(52, 58, 64, 1);
						text{
							color: rgba(255, 255, 255, 1);
						}
					}
					.zi{
						width: 204px;
						height: 24px;
						font-size: 20px;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 23.17px;
						color: rgba(33, 37, 41, 1);
					}
					.keytext{
						margin-top: 8px;
						width: 100%;
						display: flex;
						flex-direction: row;
						justify-content: flex-start;
						align-items: flex-start;
						flex-wrap: wrap;
						.list{
							margin-left: 4px;
							margin-top: 4px;
							padding:4px 8px;
							border-radius: 10px;
							border: 1px solid rgba(89, 83, 83, 1);
							justify-content: center;
							align-items: center;
							.a-text{
								font-size: 18px;
								font-weight: 600;
								
							}
						}
					}
				}
				.three{
					width: 100%;
					height: 158px;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					.zi{
						width: 204px;
						height: 24px;
						font-size: 20px;
						font-weight: 700;
						letter-spacing: 0px;
						line-height: 23.17px;
						color: rgba(33, 37, 41, 1);
					}
					.buttonbox{
						width:90%;
						margin-left: 7px;
						margin-top: 12px;
						height: 110px;
						display: flex;
						flex-direction: column;
						justify-content: flex-start;
						.list2{
							height: 28px;
							padding:0 20px;
							margin-bottom: 9px;
							border-radius: 10px;
							border: 1px solid rgba(0, 0, 0, 1);
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							text{
								
								margin-top: 4px;	
								height: 20px;
							
								font-weight: 400;
								letter-spacing: 0px;
								line-height: 17.38px;
								color: rgba(0, 0, 0, 1);
							}
							image{
								// margin-left: 134px;
								width: 24px;
								height: 24px;
							}
						}
					}
				}

			}
			.Row3{
				margin-left: 10px;
				width: 100%;
				height: 72px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				image{
					width: 30px;
					height: 30px;
				}
				text{
					margin-left: 16px;
					width: 150px;
					height: 24px;
					font-size: 18px;
					font-weight: 600;
					letter-spacing: 0px;
					line-height: 23.17px;
					color: rgba(33, 37, 41, 1);
				}
			}
		
			.switch-hide{
				opacity: 0;
				width:0;
			}
		}
		
	
	}
</style>


